<template>
  <view class="film-success">
    <view class="success-header">
      <h1><uni-icons type="checkbox" color="#f00" size="24" style="margin-right: 16rpx;"></uni-icons>预约成功</h1>
      <view class="com-list">
        <view class="list-name">手机号码：</view>
        {{info.mobile}}
      </view>
      <view class="com-list">
        <view class="list-name">手机类型：</view>
        {{info.phoneType}}
      </view>
      <view class="com-list">
        <view class="list-name">营业厅：</view>
        <view style="text-align: right;">{{info.name}} <br> {{info.address}}</view>
      </view>
      <view class="com-list">
        <view class="list-name">预约时间：</view>
        <strong>{{info.appointmentTime}}</strong>
      </view>
      <button class="header-button" @click="handleGetCode">获取预约码</button>
    </view>
    
    <uni-popup ref="popup" type="center">
      <view class="popup-main">
        <image class="main-close" @click="$refs.popup.close()" src="@/static/images/close.png" mode="widthFix"></image>
        <view class="main-body">
          <h2>启用或安装《中国联通APP》</h2>
          <button>已安装，立即启动</button>
          <button>未安装，立即下载</button>
        </view>
      </view>
    </uni-popup>
    
    <view class="receive-gift">
      <view class="gift-header"><h2>来《中国联通APP》领好礼</h2></view>
      <view class="gift-bodyer">
        <view class="gift-title">领28元美团劵和30元京东劵</view>
        <view class="gift-list">
          <view class="list-item">
            <view class="item-img">
              <image src="@/static/images/28元美团外卖券包.png" mode="widthFix"></image>
              <view>每天限领一次</view>
            </view>
            <h3>28元美团劵包 <button @click="handleGetCode()">免费领</button></h3>
          </view>
          <view class="list-item">
            <view class="item-img">
              <image src="@/static/images/30元JD券.png" mode="widthFix"></image>
              <view>领取后2小时内使用</view>
            </view>
            <h3>30元京东劵包 <button @click="handleGetCode()">免费领</button></h3>
          </view>
        </view>
      </view>
    </view>
    
    <adsense></adsense>
  </view>
</template>

<script>
  import adsense from '@/components/adsense.vue'
  import receiveGift from '@/components/receive-gift.vue'
  import point from '@/network/point.js'
  export default {
    components:{adsense,receiveGift},
    data() {
      return {
        mobile:'',
        info:{},
        timer:'',
      };
    },
    onLoad(ops) {
      this.info = JSON.parse(ops.params)
      this.mobile = this.info.mobile
      // this._getInfo()
      this.timer = setInterval(_=>{
        if(getApp().globalData.ip){
          point({
            action_code:"910000002",//对照表填 必须传
            action_type:"enter",//对照表填 必须传
            source_url: "910000000", //对照表填 必须传
            present_url: "910000000",//对照表填 必须传
            params: [{
              k: "active_id",  //必须传
              v: "tmhd",
            },
            {
              k: "user_phone", //必须传
              v: this.mobile,
            },
            {
              k: "user_ip",  // 必须传
              v: getApp().globalData.ip,
            }
          ]})
          clearInterval(this.timer)
        }
      },1000)
    },
    methods:{
      handleGetCode(){   ///  获取预约码
        window.open('https://u.10010.cn/qAtxq')
      },
      
      ///         network
      async _getInfo(){  ///  获取预约信息
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$get(`/screen/appointment/getByMobile?sign=nvfihgreoirjerngowuh&mobile=${this.mobile}`,'','1')
        if(res.code == 200){
          this.info = res.data || {}
        }else{
          uni.showToast({
            title:res.msg,
            icon:'none'
          })
          setTimeout(_=>{
            uni.reLaunch({
              url:'/pages/index/index'
            })
          },1000)
        }
        
      }
    }
  }
</script>

<style lang="less">
.film-success{
  padding: 22rpx 32rpx;
  .success-header{
    border-radius: 20rpx;
    background: #fff;
    padding: 27rpx 32rpx;
    margin-bottom: 24rpx;
    h1{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 38rpx;
      color: #222;
      margin-bottom: 42rpx;
    }
    .com-list{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      line-height: 42rpx;
      font-size: 28rpx;
      margin-bottom: 42rpx;
      strong{
        color: #f00;
        font-weight: 400;
      }
    }
    .header-button{
      background: #e60027;
      color: #fff;
      font-size: 36rpx;
      width: 100%;
      line-height: 100rpx;
      margin-top: 26rpx;
      border-radius: 50rpx;
    }
  } // .success-header end 
  
  
  .popup-main{
    text-align: right;
    .main-close{
      width: 60rpx;
    }
    .main-body{
      text-align: center;
      padding: 40rpx 50rpx;
      background: #fff;
      border-radius: 30rpx;
      margin-top: 20rpx;
      h2{
        font-size: 36rpx;
      }
      button{
        color: #fff;
        background: #e20227;
        margin: 0;
        border-radius: 50rpx;
        font-size: 30rpx;
        line-height: 80rpx;
        margin-top: 34rpx;
      }
    }
  }
  
    .receive-gift{
      border-radius: 20rpx;
      padding: 20rpx 0;
      background: #fff;
      .gift-header{
        border-bottom: .5px solid #ccc;
        padding: 10rpx 24rpx;
        h2{
          font-size: 30rpx;
          color: #333;
          padding-left: 20rpx;
          position: relative;
          line-height: 1;
          margin-bottom: 20rpx;
          &::before{
            display: block;
            content: '';
            background: #e50125;
            width: 10rpx;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      } //  gift-header
      
      .gift-bodyer{
        padding: 24rpx 32rpx;
        .gift-title{
          padding:0 8rpx;
          color: #e60027;
          font-size: 28rpx;
          margin-bottom: 22rpx;
        }
        .gift-list{
          display: flex;
          justify-content: space-between;
          .list-item{
            width: 47%;
            border-radius: 10rpx;
            border: .5px solid #ccc;
            .item-img{
              position: relative;
              view{
                position: absolute;
                bottom: 0;
                left: 0;
                background: rgba(0,0,0,.3);
                color: #fff;
                font-size: 24rpx;
                width: 240rpx;
                line-height: 1;
                padding: 6rpx 0;
                text-align: center;
              }
            }
            uni-image{
              width: 100%;
            }
            h3{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 26rpx;
              padding: 15rpx 10rpx;
              button{
                color: #fff;
                background: #e20227;
                font-size: 24rpx;
                margin: 0;
                padding: 15rpx 20rpx;
                border-radius: 50rpx;
                border: .5px solid transparent;
                line-height: 1;
                &.active{
                  background: #fff;
                  color: #e20227;
                  border-color: #e20227;
                }
              }
            }
          }
        } /// .gift-list end
      } //   gift-bodyer end
    
      
    }  // .receive-gift end
}
</style>
